<template>
    <el-main class="container">
        <el-card class="form-card">
            <div slot="header" class="card-header">
                <span>编辑优惠券</span>
                <el-button type="text" @click="$router.go(-1)">返回列表</el-button>
            </div>

            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="优惠券ID">
                    <span class="coupon-id">{{ couponId }}</span>
                </el-form-item>

                <el-form-item label="当前状态">
                    <el-tag :type="form.status === 'ENABLED' ? 'success' : 'danger'">
                        {{ form.status === 'ENABLED' ? '已启用' : '已停用' }}
                    </el-tag>
                </el-form-item>

                <el-form-item label="优惠券名称" prop="couponName">
                    <el-input v-model="form.couponName" placeholder="请输入2-20位名称" clearable />
                </el-form-item>

                <el-form-item label="优惠券类型" prop="couponType">
                    <el-select v-model="form.couponType" placeholder="请选择类型" @change="handleTypeChange">
                        <el-option label="满减券" value="0" />
                        <el-option label="折扣券" value="1" />
                        <el-option label="无门槛券" value="2" />
                    </el-select>
                </el-form-item>

                <template v-if="form.couponType === 'FULL_REDUCTION'">
                    <el-form-item label="优惠金额" prop="discountAmount">
                        <el-input-number v-model="form.discountAmount" :min="1" :max="1000" controls-position="right" />
                        <span class="unit">元</span>
                    </el-form-item>

                    <el-form-item label="最低消费" prop="minAmount">
                        <el-input-number v-model="form.minAmount" :min="1" :max="99999" controls-position="right" />
                        <span class="unit">元</span>
                    </el-form-item>
                </template>

                <template v-if="form.couponType === 'DISCOUNT'">
                    <el-form-item label="折扣率" prop="discountRate">
                        <el-input-number v-model="form.discountRate" :min="0.1" :max="9.9" :precision="1" :step="0.1"
                            controls-position="right" />
                        <span class="unit">折</span>
                    </el-form-item>
                </template>

                <template v-if="form.couponType === 'NO_THRESHOLD'">
                    <el-form-item label="优惠金额" prop="discountAmount">
                        <el-input-number v-model="form.discountAmount" :min="1" :max="1000" controls-position="right" />
                        <span class="unit">元</span>
                    </el-form-item>
                </template>

                <el-form-item label="有效期" prop="timeRange">
                    <el-date-picker v-model="form.timeRange" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" />
                </el-form-item>

                <el-form-item label="库存数量" prop="totalQuantity">
                    <el-input-number v-model="form.totalQuantity" :min="1" :max="100000" controls-position="right" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">保存修改</el-button>
                    <el-button @click="$router.go(-1)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-main>
</template>

<script>
import { getCouponDetail, updateCoupon } from '@/api/admin/Conpou'

export default {
    data() {
        return {
            couponId: this.$route.params.id,
            form: {
                couponName: '',
                couponType: '',
                discountAmount: null,
                minAmount: null,
                discountRate: null,
                timeRange: [],
                totalQuantity: 100,
                status: ''
            },
            rules: {
                couponName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' }
                ],
                couponType: [
                    { required: true, message: '请选择类型', trigger: 'change' }
                ],
                discountAmount: [
                    { required: true, message: '请输入金额', trigger: 'blur' }
                ],
                minAmount: [
                    { required: true, message: '请输入最低消费金额', trigger: 'blur' }
                ],
                discountRate: [
                    { required: true, message: '请输入折扣率', trigger: 'blur' }
                ],
                timeRange: [
                    { required: true, message: '请选择有效期', trigger: 'change' }
                ],
                totalQuantity: [
                    { required: true, message: '请输入库存数量', trigger: 'blur' }
                ]
            }
        }
    },
    async created() {
        // const couponId = this.$route.params.id
        // if (couponId) {
        //     this.couponId = couponId
        // } else {
        //     this.$message.error('无效的优惠劵ID')
        //     this.$router.back()
        // }
        await this.loadCouponDetail()
    },
    methods: {
        async loadCouponDetail() {
            try {
                const { data } = await getCouponDetail(this.couponId)
                console.log(data);

                this.form = {
                    ...data,
                    timeRange: [data.startTime, data.endTime]
                }
            } catch (error) {
                this.$message.error('获取详情失败')
            }
        },
        handleTypeChange() {
            this.form.discountAmount = null
            this.form.minAmount = null
            this.form.discountRate = null
        },
        async submitForm() {
            try {
                await this.$refs.form.validate()
                const params = {
                    ...this.form,
                    couponId: this.couponId,
                    startTime: this.form.timeRange[0],
                    endTime: this.form.timeRange[1]
                }
                delete params.timeRange
                await updateCoupon(params)
                this.$message.success('更新成功')
                this.$router.push('/marketing/coupons')
            } catch (error) {
                this.$message.error('更新失败')
            }
        }
    }
}
</script>

<style scoped>
.form-card {
    max-width: 800px;
    margin: 20px auto;
    padding: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
}

.unit {
    margin-left: 8px;
    color: #606266;
}

.coupon-id {
    color: #909399;
    font-size: 14px;
}

.el-date-editor {
    width: 100%;
}

.el-input-number {
    width: 200px;
}
</style>